<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in one.image" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="introduce-section">
			<text class="title">{{one.title}}</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{one.sell_price}}</text>
				<text class="m-price">¥{{one.market_price}}</text>
				<!-- <text class="coupon-tip">7折</text> -->
			</view>
			<view class="bot-row">
				<text>销量: {{one.sales_count}}</text>
				<text>库存: {{one.stock}}{{one.unit_name}}</text>
				<!-- <text>浏览量: {{one.show_num}}</text> -->
			</view>
		</view>
		
		<view class="c-list" v-if="one.specs_type == 2">
			<view class="c-row b-b" @click="toggleSpec">
				<text class="tit">已选择</text>
				<view class="con">
					<text class="selected-text">
						{{ specSelected }}
					</text>
					<!-- <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
						{{sItem.name}}
					</text> -->
				</view>
				<text class="yticon icon-you"></text>
			</view>
		</view>
		
		<!-- 评价 -->
		<!-- <view class="eva-section">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>(86)</text>
				<text class="tip" @click="bindtapAllComments">好评率 100% ></text>
			</view> 
			<template v-for="(item, index) in commentList">
				<view class="eva-box">
					<image class="portrait" src="@/static/logo.jpg" mode="aspectFill"></image>
					<view class="right">
						<text class="name">Leo yo</text>
						<text class="con">酒收到了，昨天和几个朋友喝，还不错！</text>
						<view class="bot">
							<text class="attr">购买类型：10年酒窖 500ML</text>
							<text class="time">2022-04-08 19:21</text>
						</view>
					</view>
				</view>
			</template>
		</view> -->
		
		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<rich-text :nodes="one.detail.d2"></rich-text>
			<!-- <view v-for="(item,index) in one.carousel_image_arr" :key="index">
				<image
					:src="item" 
					class="loaded" 
					mode="aspectFill"
				></image>
			</view> -->
		</view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn active">
				<!-- <text class="yticon icon-xiatubiao--copy"></text> -->
				<image class="yticon" src="@/static/index.png"></image>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/index" open-type="switchTab" class="p-b-btn active">
				<!-- <text class="yticon icon-gouwuche"></text> -->
				<view class="cart">
					<image class="yticon" src="@/static/cartdown.png"></image>
					<view class="cartnum" v-if="cartnum > 0">
						<text>{{ cartnum }}</text>
					</view>
					
				</view>
				<text>购物车</text>
			</navigator>
			
			
			<!-- <view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
				<image v-if="!favorite" class="yticon" src="@/static/collect.png"></image>
				<image v-if="favorite" class="yticon" src="@/static/collect@selected.png"></image>
				<text>收藏</text>
			</view> -->
			<!-- <view class="p-b-btn" :class="{active: favorite}" @click="toCustomer">
				<image class="yticon" src="@/static/customer.png"></image>
				<text>客服</text>
			</view> -->
			<button class="kefu" open-type="contact">
				<image src="@/static/customer.png"></image>
				<text>客服</text>
			</button>
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="toBuy">立即购买</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="enterCart">加入购物车</button>
			</view>
		</view>
		
		
		<!-- 规格-模态层弹窗 -->
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="cartOne.image"></image>
					<view class="right">
						<text class="price">¥{{cartOne.sell_price}}</text>
						<text class="stock">库存：{{cartOne.stock}}{{one.unit_name}}</text>
						<!-- <view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view> -->
					</view>
				</view>
				<view v-for="(item,index) in one.sku" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<!-- <text>规格</text> -->
					<view class="item-list">
						<text v-for="(childItem, childIndex) in item.list" :key="childIndex" class="sku"
							:class="{iselected: childItem.flag == 1}" @click="selectSpec(index, childIndex)">
							{{childItem.name}}
						</text>
					</view>
				</view>
				
				<view class="num">
					<view class="left">数量</view>
					<view class="right">
						<view @click="reduceCalcValueSpec()" class="reduce"><text>-</text></view>
						<view class="number">{{cartOne.num}}</view>
						<view @click="plusCalcValueSpec()" class="plus"><text>+</text></view>
					</view>
				</view>
				
				<!-- <view style="height: 80rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
					<view>数量</view>
					<view @tap.stop="reduceCalcValue(index)" class="reduce">
						<text>-</text>
					</view>
					<view class="number">{{item.num || 0}}</view>
					<view @tap.stop="plusCalcValue(index)" class="plus"><text>+</text></view>
				</view> -->
				<button class="btn" @click="query">确	定</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { Goods } from '@/utils/model/goods-model.js';
	var goods = new Goods();
	
	import { Cart } from '@/utils/model/cart-model.js';
	var cart = new Cart();
	
	export default{
		data() {
			return {
				one:{},
				specClass: 'none',
				cartOne:{},
				//specSelected:[],
				specSelected: '',//12寸,白色
				favorite: true,
				value: 1,
				bgColor: "#F2F3F5",
				color: '#323233',
				disabled: false,
				step: 1,
				
				sku_id: 0,
				isPay: 0,//0加入购物车，1立即购买
				
				cartnum: 0,
			};
		},
		onLoad(options){
			
			//接收传值,id里面放的是标题，因为测试数据并没写id 
			let that = this;
			this.id = options.id;//商品sku_id
			this.getResult(1);
			
			cart.getCount().then(res => {
				console.log('aaaaaaaaaaaaaaaaaaaaaa')
				console.log(res)
				if(res.code == 1){
					that.cartnum = res.data.count
				}
			}).catch(err => {
				//that.$u.toast(err.msg);
				console.log('eeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
				console.log(err)
			})
		},
		methods:{
			//规格弹窗开关
			toggleSpec() {
				let token = uni.getStorageSync("Access-Token-UNI");
				console.log(token)
				if(!token){
					console.log('vvvvvvvvvvvvvvvvvvvv')
					//不存在，则跳转登录页面
					uni.navigateTo({
						url: '/pages/login/index'
					});
					return;
				}
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					//this.specSelected = [];
					this.specClass = 'show';
				}
			},
			query(){
				let that = this;
				if(this.cartOne.specs_type == 2 && this.specSelected == ''){
					uni.showToast({
						title:'请选择规格!',
					})
					return
				}
				
				let sku_id = this.cartOne.sku_id;
				let num = this.cartOne.num;
				let props_text = this.specSelected.join(',');
				let is_new = this.isPay;
				
				//加入购物车
				cart.add(sku_id, num, props_text, is_new).then(res => {
					console.log('aaaaaaaaaaaaaaaaaaaaaa')
					console.log(res)
					
					
					let cartId = res.data.cartId
					//isPay 0加入购物车，1立即购买
					if(this.isPay == 0){
						that.cartnum += num;
						
						uni.showToast({
							title: '添加成功'
						})
					}else{
						uni.navigateTo({
							url:'/pages/order/add?ids='+ cartId + '&is_new=1'
						})
					}
				}).catch(err => {
					console.log('eeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
					console.log(err)
					
				})
				
				this.toggleSpec();
				
			},
			//选择规格
			selectSpec(index, childIndex){
				console.log(index)
				console.log(childIndex)
				for(let i = 0; i < this.one.sku[index].list.length; i++){
					this.one.sku[index].list[i].flag = 0;
				}
				this.one.sku[index].list[childIndex].flag = 1;
				
				let that = this;
				let specSelected = [];
				let idArr = [];
				for(let i = 0; i < that.one.sku.length; i++){
					let list = that.one.sku[i].list;
					for(let j = 0; j < list.length; j++){
						let sku = list[j];
						if(sku.flag == 1){
							specSelected.push(sku.name)
							idArr.push(sku.id)
						}
					}
				}
				that.specSelected = specSelected;
				const ids = idArr.join(',');
				var sku_id = 0;
				for (let k in that.one.gids) {
					if(that.one.gids[k] == ids){
						sku_id = k;
					}
				}
				this.id = sku_id;//商品sku_id
				this.getResult(2);
			},
			//规格减少
			reduceCalcValueSpec(){
				//if(this.cartOne.goods_specs_type == 1){
				//	let num = this.cartOne.num;
				//	if(num){
				//		this.cartOne.num = num - 1;
				//	}
				//}else{
					if(this.cartOne.num > 1){
						this.cartOne.num = this.cartOne.num - 1;
					}
				//}
				this.$forceUpdate();
			},
			//规格增加
			plusCalcValueSpec(){
				console.log('vvvvvvvvvvvvvvvvv')
				this.cartOne.num = this.cartOne.num + 1;
				console.log(this.cartOne.num)
				this.$forceUpdate();
			},
			//收藏
			toFavorite(){
				this.favorite = !this.favorite;
			},
			toBuy(){
				this.isPay = 1;
				this.toggleSpec()
				/* uni.navigateTo({
					url: `/pages/order/createOrder`
				}) */
			},
			enterCart(){
				this.isPay = 0;
				this.toggleSpec()
			},
			stopPrevent(){},
			getResult(type = 1){
				let that = this;
				goods.getDetail(that.id).then(res => {
					that.one = res.data.detail;
					that.cartOne.sku_id = that.id;
					that.cartOne.image = that.one.image[0];
					that.cartOne.sell_price = that.one.sell_price;
					that.cartOne.stock = that.one.stock;
					that.cartOne.num = 1;
					console.log(that.cartOne)
					
					if(type == 1){
						let specSelected = [];
						for(let i = 0; i < that.one.sku.length; i++){
							let list = that.one.sku[i].list;
							for(let j = 0; j < list.length; j++){
								let sku = list[j];
								console.log(sku)
								if(sku.flag == 1){
									specSelected.push(sku.name)
								}
							}
						}
						that.specSelected = specSelected;
					}
					//uni.navigateBack({
					//	delta: 1
					//})
				}).catch(err => {
					//that.$u.toast(err.msg);
					console.log('eeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
					console.log(err)
				})
			}
		},

	}
</script>

<style>
	page{
		background-color: #F4F6FA;
		padding-bottom: 160rpx;
	}
</style>
 
<style scoped lang="scss">
	@import '~@/pages/goods/detail.scss';
</style>
